<!DOCTYPE html>
<html>
<head>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
  <style>
    .form-container {
      width: 400px;
      margin: 50px auto;
      padding: 30px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    .form-title {
      text-align: center;
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 30px;
      color: #333;
    }
    .form-group {
      margin-bottom: 20px;
    }
    .required {
      color: #e74c3c;
      margin-right: 5px;
    }
    .error-message {
      color: #e74c3c;
      font-size: 12px;
      margin-top: 5px;
      display: none;
    }
  </style>
</head>
<body>
  <div class="form-container">
    <h3 class="form-title">用户注册</h3>
    <form id="signup-form">
      <div class="form-group">
        <label for="username"><span class="required">*</span> 新用户名:</label>
        <input id="username" type="text" class="form-control" placeholder="请输入用户名">
        <div id="username-error" class="error-message">用户名不能为空，至少3个字符</div>
      </div>
      
      <div class="form-group">
        <label for="password"><span class="required">*</span> 密码:</label>
        <input id="password" type="password" class="form-control" placeholder="请输入密码">
        <div id="password-error" class="error-message">密码不能为空，至少5个字符</div>
      </div>
      
      <div class="form-group">
        <label for="passwordc"><span class="required">*</span> 确认密码:</label>
        <input id="passwordc" type="password" class="form-control" placeholder="请确认密码">
        <div id="passwordc-error" class="error-message">两次密码不一致</div>
      </div>
      
      <div class="form-group text-center">
        <button type="button" class="btn btn-success btn-lg" id="signup-btn" onclick="onSignup()">点击注册</button>
        <div id="login-hint" style="display:none; margin-top:15px; color:#3c763d;">
          注册成功，<span id="countdown">2</span>秒后跳转到登录页面...
        </div>
      </div>
    </form>
  </div>

  <script>
    function onSignup() {
      // 获取输入值
      var username = document.getElementById('username').value.trim();
      var password = document.getElementById('password').value;
      var passwordc = document.getElementById('passwordc').value;
      
      // 重置错误提示
      document.querySelectorAll('.error-message').forEach(el => {
        el.style.display = 'none';
      });
      
      // 验证输入
      let valid = true;
      if (!username || username.length < 3) {
        document.getElementById('username-error').style.display = 'block';
        valid = false;
      }
      if (!password || password.length < 5) {
        document.getElementById('password-error').style.display = 'block';
        valid = false;
      }
      if (password !== passwordc) {
        document.getElementById('passwordc-error').style.display = 'block';
        valid = false;
      }
      
      if (!valid) return;
      
      // 禁用按钮防止重复提交
      document.getElementById('signup-btn').disabled = true;
      document.getElementById('signup-btn').innerHTML = '<span class="glyphicon glyphicon-refresh glyphicon-spin"></span> 注册中...';
      
      $.ajax({
        url: "/user/signup",
        type: "POST",
        data: {
          "username": username,
          "password": password
        },
        error: function(jqXHR, textStatus, errorThrown) {
          alert('网络错误: ' + errorThrown);
          resetButton();
        },
        success: function(data, textStatus, jqXHR) {
          resetButton();
          console.log('服务器响应:', data);
          
          if (data.includes('SUCCESS')) {
            // 显示成功提示
            document.getElementById("login-hint").style.display = "block";
            let countdown = 2;
            const countdownEl = document.getElementById('countdown');
            
            const timer = setInterval(() => {
              countdown--;
              countdownEl.textContent = countdown;
              if (countdown <= 0) {
                clearInterval(timer);
                window.location.href = '/static/view/signin.html';
              }
            }, 1000);
          } else {
            alert('注册失败: ' + data);
          }
        }
      });
    }
    
    function resetButton() {
      document.getElementById('signup-btn').disabled = false;
      document.getElementById('signup-btn').innerHTML = '点击注册';
    }
  </script>
</body>
</html>